{% extends "base.html" %}
{% comment 'header' %}
# This file is part of opentaps Smart Energy Applications Suite (SEAS).

# opentaps Smart Energy Applications Suite (SEAS) is free software:
# you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.

# opentaps Smart Energy Applications Suite (SEAS) is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Lesser General Public License for more details.

# You should have received a copy of the GNU Lesser General Public License
# along with opentaps Smart Energy Applications Suite (SEAS).
# If not, see <https://www.gnu.org/licenses/>.
{% endcomment %}

{% load crispy_forms_tags %}
{% load static i18n %}
{% block title %}Equipment{% endblock %}

{% block content %}
<div class="container">

  {% include "core/_breadcrumbs.html" %}

  <div class="card mb-3">
    <div class="card-body">
      <form method="post" id="equipment_form">
        {% csrf_token %}
        {% if form.non_field_errors %}
            <div class="alert alert-block alert-error">
                {% if form_error_title %}<h4 class="alert-heading">{{ form_error_title }}</h4>{% endif %}
                <ul>
                    {{ form.non_field_errors|unordered_list }}
                </ul>
            </div>
        {% endif %}
        <input type="hidden" name="bacnet_prefix" id="bacnet_prefix" ref="bacnet_prefix" value="{{ form.bacnet_prefix.initial|default:'' }}"/>
        <input type="hidden" name="device_id" id="device_id" ref="device_id" value="{{ form.device_id.initial|default:'' }}"/>

        {{ form.entity_id|as_crispy_field }}
        {{ form.equipment_type|as_crispy_field }}
        <div v-cloak v-if="is_solaredge">
          {{ form.solaredge_api_key|as_crispy_field }}
          {{ form.solaredge_site_id|as_crispy_field }}
        </div>
        {{ form.description|as_crispy_field }}
        {{ form.model|as_crispy_field }}

        <div class="form-group d-flex justify-content-around mt-5">
          <a href="{% if object %}{% url 'core:site_detail' object.entity_id %}{% else %}{% url 'core:site_list' %}{% endif %}" class="btn btn-secondary col-5" role="button"><i class="fa fa-times mr-2"></i> Cancel</a>
          <button class="btn btn-primary col-5" type="submit"><i class="fa fa-edit mr-2"></i> Save</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
(function() {
  new Vue({
    name: 'equipment_form',
    el: '#equipment_form',
    data() {
      return {
        is_solaredge: false
      }
    },
    mounted() {
      console.log('mounted..');
      var select_el = this.$el['equipment_type'];
      if (select_el) {
        console.log('mounted, found select value', select_el.value);
        this.is_solaredge = 'SOLAREDGE' == select_el.value;
        select_el.addEventListener("change", this.changed_select);
      }
      if (this.is_solaredge) select_el.value = 'SOLAREDGE';
      else select_el.value = 'GENERIC';
    },
    methods: {
      changed_select(e) {
        console.log('changed_select..', e);
        var select_el = this.$el['equipment_type'];
        if (select_el) {
          this.is_solaredge = 'SOLAREDGE' == select_el.value;
        }
      }
    }
  });
})();
</script>

{% endblock content %}
